<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,height=device-height"/>
    <title>resume</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            font-size: 20px;
        }
        ul {
            list-style: none;
        }
        #resume {
            width: 34rem;
            min-height: 1210px;
            box-shadow: 0 2px 40px 5px rgba(0,0,0,0.5);
            margin: 10px auto;
            display: flex;
            
        }
        .left-ct {
            width: 195px;
            height: 1263px;
            background: linear-gradient(to bottom right,#254665,#305679);
            color: #fff;
            font-size: 12px;
        }
        .right-ct {
            min-width: 485px;
            min-height: 1263px;
            color: #254665;
            font-family: KaiTi_GB2312;
            font-size: 12px;
        }
        .portrait-ct {
            width: 100px;
            height: 132px;
            background: #fff;
            margin-top: 25px;
            margin-left: 28px;
            border: 1px solid #ccc;
            
            
        }
        .portrait {
            width: 92px;
            height: 124px;
            margin-left: 4px;
            margin-top: 4px;
            background: url('imgs/myphoto.png') center no-repeat;
            background-size: cover;
        }
        ul.information {
            margin: 0;
            padding: 0;
            margin-top: 30px;
            width: 200px;
        }
        .information li {
            margin-top: 20px;
            color: #ccc;
        }
        .title {
            margin-top: 50px;
            font-size: 20px;
            color: #ccc;
        }
        .title span {
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 1px solid #fff;
            background: #fff;
            transform: rotate(45deg);
            margin-right: 10px;
        }
        .technical-ct {
            margin-left: 10px;
            padding: 0;
        }
        .technical-ct li {
            display: block;
            line-height: 30px;
            color: #ccc;
            margin-top: 20px;
        }
        .technical-1 {
            border-bottom: 4px solid #ccc;
        }
        .technical-2 {
            width: 83px;
            border-bottom: 4px solid #ccc;
        }
        .technical-3 {
            width: 83px;
            border-bottom: 4px solid #ccc;
        }
        .technical-4 {
            width: 63px;
            border-bottom: 4px solid #ccc;
        }
        .technical-5 {
            width: 33px;
            border-bottom: 4px solid #ccc;
        }
        .technical-6 {
            width: 40px;
            border-bottom: 4px solid #ccc;
        }
        .technical-7 {
            width: 15px;
            border-bottom: 4px solid #ccc;
        }
        .hobby {
            padding: 0;
            width: 120px;
            flex-wrap: wrap;
            justify-content: space-between;
            display: flex;
            color: #ccc;
        }
        .hobby li {
            margin-top: 20px;
        }
        .myname {
            margin-top: 40px;
            margin-left: 40px;
            font-size: 25px;
            font-weight: bold;
            
            
            letter-spacing: 5px;
        }
        .myintention {
            margin:10px 50px;
        }
        .myintention span {
            display: inline-block;
   
            border-right: 1px solid #254665;
            padding-right: 10px;
            margin-right: 10px;
     

        }
        .logo {
            width: 30px;
            height: 30px;
            margin-bottom: -10px;
        }
        .education {
            margin-left: 30px;
            margin-top: 30px;
        }
        .education span{
            width: 385px;
            display: inline-block;
            margin-left: 5px;
            font-size: 15px;
            font-weight: bold;
            line-height: 30px;
            border-bottom: 2px solid #254665;
        }
        .right-ct p{
            margin-left: 50px;
            width: 408px;
            line-height: 20px;
            margin-top:-10px;
        }
        p.first {
            margin-top: 10px;
        }
        .bullute {
            width: 10px;
            height: 10px;
            display: inline-block;
            border-radius: 50%;
            background: #000;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="resume">
        <div class="left-ct">
            <div class="portrait-ct">
                <div class="portrait"></div>
                <ul class="information">
                    <li>年龄：24</li>
                    <li>性别：男</li>
                    <li>学历：专科</li>
                    <li>地址: 广东潮州</li>
                    <li>微信: Dan_Lin_333</li>
                    <li>电话：15016507441</li>
                    <li>qq: 919739869</li>
                    <li>邮箱: 919739869@qq.com</li>
                    
                </ul>
                <div class="title"><span></span>技能</div>
                <ul class="technical-ct">
                    <li class="technical-1">JavaScript</li>
                    <li class="technical-2">HTML5+CSS3</li>
                    <li class="technical-3">jQuery</li>
                    <li class="technical-3">Vue.js</li>
                    <li class="technical-4">ES6</li>
                    <li class="technical-5">Webpack</li>
                </ul>
                <br>
                <div class="title"><span></span>爱好</div>
                <ul class="hobby">
                    <li>music</li>
                    <li>movie</li>
                    <li>badminton</li>
                    <li>read</li>
                </ul>
            </div>
        </div>
        <div class="right-ct">
            <div class="myname">林晓弟</div>
            <div class="myintention">求职意向: 前端开发工程师。</div>
            <div class="education"><img class="logo" src="imgs/timg (5).png" alt=""><span>掌握技能</span></div>
            
            <p class="first"><span class="bullute"></span>熟练掌握HTML5+CSS3、JavaScript、ES6、jQuery、Ajax</p>
            <p><span class="bullute"></span>熟悉 Vue.js、Mui、Mint-UI构建网页并实现业务逻辑</p>
            <p><span class="bullute"></span>有SVN、Git、npm等包和代码管理工具是使用经验</p>
            <p><span class="bullute"></span>有webpack代码打包压缩等处理工具使用经验</p>
            <p><span class="bullute"></span>使用编辑器：  vscode、Visual Studio</p>
            <div class="education"><img class="logo" src="imgs/timg (5).png" alt=""><span>项目经验</span></div>
            <p class="first"><span class="bullute"></span><strong>MES系统</strong></p>
            <p><strong>项目描述：</strong></p>
            <p><strong>使用技术：</strong>用到了html、css、js、ES6、jQuery、ajax、bootstrap、SweetAlert </p>

            <p class="first"><span class="bullute"></span><strong>FM播放器</strong></p>
            <p><strong>预览地址：</strong><a href=" https://xiabuxia.github.io/music-player/player.html"> https://xiabuxia.github.io/music-player/player.html</a></p>
            <p><strong>源码地址：</strong><a href="https://github.com/xiabuxia/music-player">https://github.com/xiabuxia/music-player</a> </p>
            <p><strong>项目描述：</strong>该播放器使用了HTML5的Audio对象，用该对象的属性和方法实现歌曲的播放暂停等功能，整个项目是用原生js实现，使用ajax jsonp方式方式请求歌曲信息，得到歌曲id后再ajax请求歌词，播放器能够实现拖动，封装了原生ajax和实现拖动组件</p>
            <p><strong>使用技术：</strong>用到了html、css、js，sass、requirejs，原生ajax的请求，后期使用gulp工具对js和css进行打包压缩</p>
            
            <p class="first"><span class="bullute"></span><strong>某机构主页</strong></p>
            <p><strong>预览地址：</strong><a href="https://xiabuxia.github.io/product-lijiang/">https://xiabuxia.github.io/product-lijiang/</a>  </p>
            <p><strong>源码地址：</strong><a href="https://github.com/xiabuxia/product-lijiao">https://github.com/xiabuxia/product-lijiao</a>  </p>
            <p><strong>项目描述：</strong>该主页用flex布局，使用jQuery进行编码，封装了轮播组件和tab切换组件，用webpack对项目进行打包和压缩以及用html、css以及图片相关的loader对其进行处理，使用jq的ajax请求得到当地天气信息，该天气API支持cros方式</p>
            <p><strong>使用技术：</strong>html+css、npm、jQuery、Ajax</p>
            
            <p class="first"><span class="bullute"></span><strong>vue todoList和用vue做的手机页面</strong></p>
            <p><strong>预览地址：</strong> <a href="https://xiabuxia.github.io/cc/dist/index.html">https://xiabuxia.github.io/cc/dist/index.html</a></p>
            <p><strong>预览地址：</strong> <a href="https://xiabuxia.github.io/sell-app/dist/index.html">https://xiabuxia.github.io/sell-app/dist/index.html（本地服务器的数据）</a></p>
            <p><strong>源码地址：</strong> <a href="https://github.com/xiabuxia/sell-app">https://github.com/xiabuxia/sell-app</a>  </p>
            <p><strong>使用技术：</strong>vue+wepack、vue-router实现商品区和评论区的切换，使用vue-resource与后台交互，better-scroll实现页面的滚东，使用flex进行页面布局，mock后端数据</p>
            <p  class="first"><span class="bullute"></span><strong>Ui组件库：</strong><a href="https://github.com/xiabuxia/UI">https://github.com/xiabuxia/UI</a></p>
            <p  class="first"><span class="bullute"></span><strong>Github地址：</strong><a href="https://github.com/xiabuxia">https://github.com/xiabuxia</a></p>
   

            <div class="education"><img class="logo" src="imgs/timg (5).png" alt=""><span>个人评价</span></div>
            <p class="first"><strong>1、</strong>做事踏实认真，能吃苦耐劳，有独立分析解决问题的能力。具备良好的学习、沟通和团队协作能力 , 对前端技术及用户体验追求极致，能承受较大的工作压力；</p>
            <p><strong>2、</strong>喜欢互联网方面工作，热衷于前端技术，在前端开发方面有一定经验；</p>
            <p><strong>3、</strong>敢于面对和克服困难，能够尽心竭力的为企业工作。</p>
            
            
        </div>
    </div>
</body>
</html>